<template>
	<view class="video">
		<view id="muuVideo" ></view>
	</view>
</template>

<script>
	import muu from '../../static/js/time.js'
	
	export default {
		name: 'VideoPlayerH5',
		props: {
			data: {
				type: Object,
				default: {}
			}
		},

		data() {
			return {
				width: uni.getSystemInfoSync().windowWidth,
				height: 0,
				src: '',
				poster: '',
				canUserMemberCard: false, //是否会员免费
				tryPlay: false, //默认禁止试看，仅系列课有效
				tryTimeEnd: false, //试看时间是否结束，仅单课有效
				player: {}
			}
		},
		onReady: function(res) {
			
		},
		created() {
			let that = this
			// 封面
			this.poster = this.data.video_paster_src
			// 设置默认路径
			this.setSrc()
			
			this.canUserMemberCardFn()
			console.log('视频播放器')
			this.$nextTick(()=>{
				//计算视频播放器高度
				this.height = this.width/1.7777778
				
				let skinLayout = [
					{name: "bigPlayButton", align: "cc", x: 30, y: 30},
					{name: "H5Loading", align: "cc"},
					{name: "errorDisplay", align: "tlabs", x: 0, y: 0},
					{name: "infoDisplay", align: "cc"},
					{
						name: "controlBar", align: "blabs", x: 0, y: 0,
						children: [
							{name: "progress", align: "blabs", x: 0, y: 1},
							{name: "playButton", align: "tl", x: 15, y: 12},
							{name: "timeDisplay", align: "tl", x: 10, y: 5},
							{name: "fullScreenButton", align:"tr", x:10, y: 12},
						]
					}
				];
				let params = {
					'id': 'muuVideo',
					'source': this.src,
					'autoplay' : false,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
					'cover': this.poster,
					'controls': 'default',
					'width' :  this.width + 'px',//视频的显示宽度，请尽量使用视频分辨率宽度
					'height' : this.height + 'px',
					'useH5Prism': true, //     指定使用H5播放器。
					'components': [{
					  name: 'RateComponent',
					  type: AliPlayerComponent.RateComponent
					}],
					'skinLayout': skinLayout,
				}
				
				//实例化视频播放器
				this.player = new Aliplayer(params,function(player){
					console.log("The player is created")
				});
				
				//事件监听
				this.player.on('play',function(e){
					console.log('播放监听');
					if(that.data.play_type == 1 && that.tryPlay == false && that.data.purchase == 0 && that.canUserMemberCard == false){
						//系列课
						//暂停视频
						that.player.pause()
						that.showTryPlayModal()
					}else{
						//仅购买后或会员统计
						if(that.data.purchase == 1 || that.data.can_be_used_card!=undefined && that.data.can_be_used_card.member_card_info.discount == 0){
							muu.startTimeSend('Knowledge',that.data.id)
						}
					}
				});
				
				//监听播放暂停
				this.player.on('pause',function(e){
					console.log('播放暂停');
					muu.stopTimeSend()
				});
				
				//监听播放完毕
				this.player.on('ended',function(e){
					console.log('播放完毕')
					muu.stopTimeSend()
				});
				
				//监听进度
				this.player.on('timeupdate',function(e){
					var time = that.player.getCurrentTime() // 获取播放的时间
					//console.log(time);
					//单课试看时间处理
					if(that.data.play_type == 0 && that.data.purchase == 0 && that.canUserMemberCard == false){
						if(time > that.data.try_time && that.tryTimeEnd == false){
							//暂停视频
							that.player.pause();
							that.tryTimeEnd = true
							that.showTryPlayModal()
							return false
						}else{
							that.tryTimeEnd = false
						}
					}
				});
				
				this.getVideoPlayerHeight('#muuVideo');
			})
			//console.log(this.data.video_chapter)
		},
		destroyed() {
			muu.stopTimeSend()
		},
		methods: {
			
			getVideoPlayerHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					//console.log(res)
					this.height = res[0][0].height
					//let heightPx = this.height
					this.$emit("setVideoPlayerHeight",this.height);
				})
			},
			/**
			 * 设置会员免费尊享
			 */
			canUserMemberCardFn: function(){
				if(this.data.can_be_used_card && this.data.can_be_used_card['member_card_info']['discount'] == 0){
					//会员专享
					this.canUserMemberCard = true
				}
			},
			
			/**
			 * 设置默认路径
			 */
			setSrc: function(){
				
				if(this.data.play_type == 1){ //系列课
					let chapter = this.data.video_chapter[0].list[0]
					this.src = chapter.all_url
					if(chapter.try_play == 1){
						this.tryPlay = true
					}
				}else{ //单课
					this.src = this.data.video_all_url
				}
			},
			
			/**
			 * 播放系列课列表内容
			 * @param {Number} chapter_index 章节索引
			 * @param {Number} lesson_index 课程索引
			 */
			playChapterIndex: function(chapter_index,lessons_index){
				let chapter = this.data.video_chapter[chapter_index].list[lessons_index]
				//console.log(chapter)
				// 未购买
				if(this.data.purchase == 0){
					if(chapter.try_play == 1 || this.canUserMemberCard == true){
						//允许播放
						// 停止播放
						this.player.stop()
						// 更换视频地址
						this.src = chapter.all_url
						// 立即播放
						this.player.loadByUrl(this.src);
						this.player.play()
						// 索引传给父组件
						this.$emit('returnChildData',{
							chapter_index:chapter_index,
							lessons_index:lessons_index
						})
					}else{
						// 停止播放
						//this.player.stop()
						this.showTryPlayModal()
					}
				}
				//已购买
				if(this.data.purchase == 1){
					this.player.stop()
					// 更换视频地址
					this.src = chapter.all_url
					// 立即播放
					this.player.loadByUrl(this.src);
					this.player.play()
					// 索引传给父组件
					this.$emit('returnChildData',{
						chapter_index:chapter_index,
						lessons_index:lessons_index
					})
				}
			},

			/**
			 * 显示试看结束模态框
			 */
			showTryPlayModal: function(){
				uni.showModal({
					title: '温馨提示',
					content: '订阅后观看完整视频',
					success: function(res){
						if(res.confirm){
							console.log('确认')
						}else{
							console.log('取消')
						}
					}
				});
			},
			videoErrorCallback: function(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.video {
		position: relative;
		
	}
</style>
